<template>
	<view>
		<view class="inputs_info">
			<view class="ipt">
				<input v-model="params.magazinePageName" @confirm='inputs' class="inputs" confirm-type="search" type="text" placeholder="输入杂志名字" />
				<uni-icons type="search" size="24" color="#888888"></uni-icons>
			</view>
		</view>
		<swipergo :swiperid="swiperid" :upHeight="300" :upWith="716"></swipergo>
		<view class="tit">
			<view class="cont_flex page_width">
				<view class="flex_item" v-for="(item,index) in magazineList" :key="index" @click="goPage(index)">
					<image :src="item.magazineImage" mode=""></image>
					<view class="text">{{item.magazinePageName}}</view>
				</view>
			</view>
			<uni-load-more v-if="!magazineList.length <= 0" :status="statusshow"></uni-load-more>
		</view>
		<kong v-if="magazineList.length == 0"></kong>
		<uni-popup ref="popup" type="center">
			<view class="popups">
				<view class="title">{{magazineList[current].magazinePageName}}</view>
				<view class="close" @click="close()">关闭</view>
					<view class="btn btnl" @click="pageLeft">上一页</view>
					<view class="btn btnr" @click="pageRight">下一页</view>
				<view class="images" @click="preview(magazineList[current].magazineImage)">
					<image :src="magazineList[current].magazineImage" mode=""></image>
				</view>
				<view class="btns" @click="callPhone(magazineList[current].magazinePhone)">
					立即拨打电话：{{magazineList[current].magazinePhone}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getMagazineinfo,getMagazinesList} from '@/common/http.api.js';
	export default {
		data() {
			return {
				swiperid:5,
				params:{
					pageNum: 1,
					pageSize: 16,
					magazineId:0,
					magazinePageName:''
				},
				magazineList:[],
				info:{},
				current:0,
				statusshow:'loading'
			};
		},
		onLoad(e) {
			this.params.magazineId = e.id
			this.getList()
			// this.$refs.popup.open()
		},
		methods:{
			inputs(e){
				this.magazineList = []
				this.params.magazinePageName = e.detail.value
				getMagazinesList(this.params).then(res=>{
					this.magazineList.push(...res.rows)
				})
			},
			pageLeft(){
				if(this.current == 0){
					uni.showToast({
						icon:'none',
						title:'没有数据了'
					})
					return
				}
				 this.current --
			},
			pageRight(){
				if(this.current == this.magazineList.length -1){
					uni.showToast({
						icon:'none',
						title:'没有数据了'
					})
					return
				}
				this.current ++
			},
			getList(){
				getMagazinesList(this.params).then(res=>{
					this.magazineList.push(...res.rows)
					if(this.magazineList.length == res.total){
						this.statusshow = 'no-more'
					}
				})
			},
			onReachBottom(){
				this.params.pageNum ++ 
				this.getList()
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone,
					success() {
					}
				});
			},
			goPage(index){
				this.current = index
				this.$refs.popup.open()
			},
			preview(imgurl){
				uni.previewImage({
					urls: [imgurl]
				});
			},

			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F0F0F1;
	}
	.cont_flex {
		display: flex;
		margin: 10rpx auto;
		flex-wrap: wrap;
		text-align: center;
		width: 716rpx;
		gap: 20rpx;
		.flex_item {
			width: 225rpx;
			height: 340rpx;
			margin-bottom: 28rpx;
			image {
				width: 100%;
				height: 300rpx;
			}
			.text {
				width: 200rpx;
				font-size: 30rpx;
				line-height: 40rpx;
				white-space:nowrap;
				overflow:hidden;
				margin: 0 auto;
			}
		}
	}
	
	.popups{
		background-color: #fff;
		width: 720rpx;
		height:1180rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		.title{
			text-align: center;
			font-size: 32rpx;
			padding-top: 24rpx;
		}
		.close{
			width: 140rpx;
			height: 60rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #000000;
			opacity: 0.8;
			text-align: center;
			line-height: 60rpx;
			position: absolute;
			top: 0%;
			right: 0%;
			border-radius: 0rpx 10rpx 0rpx 0rpx;
		}
		// .btns_ads{
		// 	position: absolute;
		// 	box-sizing: border-box;
		// 	top: 40%;

		// }
		.btn{
			top: 40%;
			font-size: 28rpx;
			color: #fff;
			background-color: #000000;
			opacity: 0.8;
			padding: 10rpx 24rpx;
		}
		.btnl{
			left: 0%;
			position: absolute;
		}
		.btnr{
			right: 0%;
			position: absolute;
		}
		.images{
			height: 940rpx;
			margin: 24rpx;
			image{
				width: 100%;
				height: 940rpx;
			}
		}
		.btns{
			width: 672rpx;
			margin: 40rpx auto;
			height: 76rpx;
			background-color: #022B5F;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			font-size: 30rpx;
			border-radius: 0rpx 0rpx 10rpx 10rpx;
		}
	}
</style>
